<template>
  <transition name="el-fade-in">
    <div class="alert" v-if="show">
      <div class="alertBox">
        <div class="title">
          <span>{{ title }}</span>
        </div>
        <div class="cont">
          <slot name="cont"></slot>
        </div>
        <div class="footer">
          <span v-if="showCancel" class="button-w" @click="cancel">{{ cancelText }}</span>
          <span v-if="showSure" class="button-n" @click="sureClick">{{ sureText }}</span>
        </div>
      </div>
    </div>
  </transition>
</template>
<script type="text/ecmascript-6">
export default {
  name: 'alert',
  props: {
    show: {
      type: Boolean
    },
    title: {
      type: String
    },
    sureText: {
      type: String,
      default: '确定'
    },
    cancelText: {
      type: String,
      default: '取消'
    },
    showCancel: {
      type: Boolean,
      default: true
    },
    showSure: {
      type: Boolean,
      default: true
    }
  },
  data () {
    return {
    }
  },
  methods: {
    sureClick () {
      this.$emit('sureClick')
    },
    cancel () {
      this.$emit('close')
    }
  }
}
</script>
<style lang="stylus" rel="stylesheet/stylus" scoped>
.alert
  position fixed
  top 0
  left 0
  width 100%
  height 100%
  background rgba(0, 0, 0, 0.4)
  z-index 999
  overflow auto
.alertBox
  position absolute
  width 500px
  top 15vh
  left 0
  right 0
  margin 0 auto 100px
  padding 20px 10px
  box-sizing border-box
  border-radius 4px
  background #ffffff
  .title
    text-align center
    margin-bottom 30px
    span
      fontSize(16px, 30px, #666666)
      font-weight bold
  .footer
    text-align right
    margin-top 40px
    >span
      margin 0 10px
</style>
